<template>
	<view class="container">
		<view class="top">
			<view class="search">
				<input class="search_input" :value='name' data-name="name" @input="input_" placeholder="请输入商品关键词" />
				<view class="search_button" v-on:click="search"><image src="../../static/images/search.png"></image>搜索</view>
			</view>
			<!-- <image class="cart" src="../../static/images/cart_ed.png" v-on:click="cart"></image> -->
		</view>
		<view class="none" v-if="result.length==0">没有相关商品</view>
		<view class="goods_list" v-else>
			<view class="goods_unit" v-for="(value,key) in result" :key="key" :id="value.goods_id" v-on:click="goods_detail">
				<image class="goods_unit_pic" :style="{height:pic_h}" mode="aspectFill" :src="url+value.imgurl"></image>
				<view class="goods_name">{{value.goods_name}}</view>
				<view class="goods_property">
					<view class="goods_price">￥{{value.price}}</view>
				</view>
				<view class="goods_property">
					<view class="old_price">￥{{value.original}}</view>
					<view class="goods_cash">{{value.sum}}</view>
				</view>
				<view class="goods_commsion" v-if="value.commission!=0">
					<view class="commission_name">佣金</view>
					<view class="commission_price">￥{{value.commission}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style>
	.goods_list{width:94%;margin:10upx 3%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
	.goods_unit{width:48%;height: 500upx;background: #FFFFFF;box-shadow: 0px 0px 6px #ccc;margin:20upx 0;display: flex;
	            flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 30upx;}
	.goods_unit_pic{width:100%;overflow:hidden;}
	.goods_name{width:96%;padding:0 2%;line-height: 40upx;font-size: 26upx;color: #717171;}
	.sub_goods_name{width:96%;padding:0 2%;line-height: 35upx;font-size: 24upx;color:#AAAAAA;}
	.goods_property{width:96%;padding:0 2%;display: flex;justify-content: space-between;align-items: center;height: 50upx;}
	.goods_price{font-size: 36upx;font-weight: bold;color: #f27e41;}
	.goods_property image{width:50upx;height: 50upx;}
	.old_price,.goods_cash{font-size: 24upx;color: #AAAAAA;}
	.old_price{text-decoration: line-through;}
	/******************/
	.sort_list{width:92%;margin:10upx 2%;padding-left:10upx 2%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
	.sort_unit{width:18%;padding:20upx 0;margin:20upx 0;border-radius: 10upx;background: #E1E1E1;display: flex;justify-content: center;align-items: center;flex-direction: column;}
	.sort_unit image{width:60upx;height: 60upx;}
	.sort_name{font-size: 24upx;margin-top: 20upx;}
	.sort_title{width:92%;margin:10upx 2%;padding-left:10upx 2%;display: flex;justify-content: space-between;align-items: center;
	height: 70upx;border-bottom: 1px dashed #282828;}
	.title_name{font-size: 28upx;color: #282828;font-weight: bold;}
	.more{width:40upx;height: 40upx;}
	/******************/
	/******************/
	.top{width:92%;margin:20px 2% 6px 2%;padding:0 2%;display: flex;justify-content:space-between;align-items: center;}
	.search{width:98%;background: #E1E1E1;border-radius: 35upx;height: 70upx;overflow: hidden;
	        display: flex;justify-content: flex-start;align-items: center;}
	.search_input{width:70%;height:70upx;color: #282828;line-height: 70upx;font-size: 28upx;padding-left:5%;}
	.search_button{width:30%;display: flex;justify-content: center;align-items: center;border-left: 1px solid #282828;font-weight:bold;
				   color: #282828;font-size: 28upx;background: #E1E1E1;height:50upx;line-height: 50upx;}
	.search_button image{width:40upx;height:40upx;margin-right:10upx;}
	.cart{width:70upx;height: 70upx;}
	.none{width:100%;height: 80upx;line-height: 80upx;text-align: center;font-size: 28upx;}
	/******************/
	page,.container{background: #F5F5F5;}
	/**********************************************/
</style>
<script>
	export default {
		data() {
			return {
				name:'',
				fixed:0,
				sub_w:'',
				pic_h:'',
				current: 0,
				goods_sort:[],
				start:1,
				result:[],
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.sub_w    = 8*95+"px";
			this.pic_h = w*0.94*0.48+"px";
			this.name = e.name;
			this.initialize(1);
		},
		onReachBottom:function()
		{
			this.get_goods_list();
		},
		methods: {
			cart:function()
			{
				var member_id = uni.getStorageSync("member_id");
				if(member_id=="")
				{
					uni.navigateTo({
						url:"/pages/member/login"
					})
					// uni.showModal({
					// 	title:"登录提醒",
					// 	content:"请先授权登录后，再操作",
					// 	showCancel:false,
					// 	success:function()
					// 	{
					// 		uni.switchTab({
					// 			url:"/pages/member/index"
					// 		})
					// 	}
					// })
				}
				else
				{
					uni.navigateTo({url:"/pages/mall/cart"});
				}
			},
			goods_detail:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"../mall/goods_detail?id="+id
				})
			},
			get_goods_list:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				//#ifdef MP-WEIXIN
				var type = "weixin";
				//#endif
				//#ifdef APP-PLUS
				var type = "app";
				//#endif
				uni.request({
					url: this.url+'/wechat_search_goods_list', 
					data: {member_id:member_id,id:0,type:type,name:this.name,start:this.start},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						// console.log(res);
						that.start += 10;
						if(res.data.status==1)
						{
							for(var i=0;i<res.data.result.length;i++)
							{
								that.result.push(res.data.result[i]);
							}
						}
						else
						{
							uni.showToast({
								title:"我是有底线的",
								duration:1000
							})
						}
					}
				});
			},
			scrolltoupper_ :function(e)
			{
				console.log(e);
				console.log("teststestsss");
				this.fixed = 1;
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="name")
				{
					this.name = e.target.value;
				}
			},
			search:function()
			{
				if(this.name=="")
				{
					uni.showToast({
						title:"不能为空",
						duration:2000
					})
				}
				else
				{
					this.initialize(2);
				}
			},
			initialize:function(st)
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				//#ifdef MP-WEIXIN
				var type = "weixin";
				//#endif
				//#ifdef APP-PLUS
				var type = "app";
				//#endif
				//#ifdef H5
				var type = "app";
				//#endif
				uni.request({
					url: this.url+"/wechat_mall_search",
					data: {member_id:member_id,type:type,name:this.name},
					header: {
					  'Content-Type': 'application/json'
					},
					success: function (res) 
					{
						if(st==1)
						{
							if(res.data.status==1)
							{
								for(var i=0;i<res.data.result.length;i++)
								{
									that.result.push(res.data.result[i]);
								}
							}
						}
						if(st==2)
						{
							if(res.data.status==1)
							{
								that.result = res.data.result;
							}
						}
						console.log(that.result);
					}
				})
			}
		}
	}
</script>